{% extends 'base.html' %}


{% block title %}
首页
{% endblock title %}


{% block css %}
<style>
    .stats {
        min-height: 240px;
    }
</style>

{% endblock css %}



{% block content %}
<div class="row dash-row">
    <div class="col-xl-4">
        <div class="stats stats-primary">
            <h3 class="stats-title">台站运行情况</h3>
            <div class="stats-content">
                <div class="stats-icon">

                    <i class="fas fa-house-damage"></i>
                </div>
                <div class="stats-data">
                    <div class="stats-number">114</div>
                    <div class="stats-change">
                        <span class="stats-percentage">+25%</span>
                        <span class="stats-timeframe">from last month</span>
                    </div>
                </div>
                <div class="stats-data">
                    <div class="btn-group-vertical">
                        <button type="button" class="btn btn-sm btn-secondary">
                            总数 <span class="badge badge-pill badge-light">66</span>
                        </button>
                        <button type="button" class="btn btn-sm btn-success">运行 <span
                                class="badge badge-pill badge-light">58</span></button>
                        <button type="button" class="btn btn-sm btn-warning">暂停 <span
                                class="badge badge-pill badge-light">8</span></button>
                        <button type="button" class="btn btn-sm btn-danger">停止 <span
                                class="badge badge-pill badge-light">10</span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="stats stats-success ">
            <h3 class="stats-title">测震仪器情况</h3>
            <div class="stats-content">
                <div class="stats-icon">
                    <i class="fas fa-hdd"></i>
                </div>
                <div class="stats-data">
                    <div class="stats-number">20</div>
                    <div class="stats-number">10</div>
                    <div class="stats-change">
                        <!-- <span class="stats-percentage">+25%</span> -->
                        <!-- <span class="stats-timeframe">from last month</span> -->
                    </div>
                </div>
                <div class="stats-data">
                    <div class="btn-group">
                        <div class="btn-group-vertical">
                            <button type="button" class="btn btn-sm btn-light">
                                数采
                            </button>
                            <button type="button" class="btn btn-sm btn-primary">在用 <span
                                    class="badge badge-pill badge-light">58</span></button>
                            <button type="button" class="btn btn-sm btn-info">库存 <span
                                    class="badge badge-pill badge-light">8</span></button>
                            <button type="button" class="btn btn-sm btn-dark">故障 <span
                                    class="badge badge-pill badge-light">10</span></button>
                            <button type="button" class="btn btn-sm btn-warning">维修 <span
                                    class="badge badge-pill badge-light">8</span></button>
                        </div>
                        <div class="btn-group-vertical">
                            <button type="button" class="btn btn-sm btn-light">
                                地震仪
                            </button>
                            <button type="button" class="btn btn-sm btn-primary">在用 <span
                                    class="badge badge-pill badge-light">58</span></button>
                            <button type="button" class="btn btn-sm btn-info">库存 <span
                                    class="badge badge-pill badge-light">8</span></button>
                            <button type="button" class="btn btn-sm btn-dark">故障 <span
                                    class="badge badge-pill badge-light">10</span></button>
                            <button type="button" class="btn btn-sm btn-warning">维修 <span
                                    class="badge badge-pill badge-light">8</span></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="stats stats-danger">
            <h3 class="stats-title">本月维护情况</h3>
            <div class="stats-content">
                <div class="stats-icon">
                    <i class="fas fa-hammer"></i>
                </div>
                <div class="stats-data">
                    <div class="stats-number">15</div>
                    <div class="stats-change">
                        <span class="stats-percentage">+25%</span>
                        <span class="stats-timeframe">from last month</span>
                    </div>
                </div>
                <div class="stats-data">
                    <div class="btn-group-vertical">
                        <button type="button" class="btn btn-sm btn-secondary">
                            收数 <span class="badge badge-pill badge-light">66</span>
                        </button>
                        <button type="button" class="btn btn-sm btn-primary">正常 <span
                                class="badge badge-pill badge-light">58</span></button>
                        <button type="button" class="btn btn-sm btn-dark">故障 <span
                                class="badge badge-pill badge-light">10</span></button>
                        <button type="button" class="btn btn-sm btn-warning">恢复 <span
                                class="badge badge-pill badge-light">8</span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xl-6">
        <div class="card spur-card">
            <div class="card-header">
                <div class="spur-card-icon">
                    <i class="fas fa-chart-bar"></i>
                </div>
                <div class="spur-card-title"> 台站维护频次图表 </div>
                <div class="spur-card-menu">
                    <div class="dropdown show">
                        <a class="spur-card-menu-link" href="#" role="button" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                        </a>
                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body spur-card-body-chart">
                <canvas id="spurChartjsBar"></canvas>
                <script>
                    var ctx = document.getElementById("spurChartjsBar").getContext('2d');
                    var myChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                            datasets: [{
                                label: '台',
                                data: [12, 19, 3, 5, 2, 30, 16, 17, 20, 21, 5, 42],
                                backgroundColor: window.chartColors.primary,
                                borderColor: 'transparent'
                            }]
                        },
                        options: {
                            legend: {
                                display: false
                            },
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero: true
                                    }
                                }]
                            }
                        }
                    });
                </script>
            </div>
        </div>
    </div>
    <div class="col-xl-6">
        <div class="card spur-card">
            <div class="card-header">
                <div class="spur-card-icon">
                    <i class="fas fa-bell"></i>
                </div>
                <div class="spur-card-title">数据收集提醒</div>
            </div>
            <div class="card-body ">
                <div class="notifications">
                    <a href="#!" class="notification">
                        <div class="notification-icon">
                            <i class="fas fa-inbox"></i>
                        </div>
                        <div class="notification-text">53260</div>
                        <span class="notification-time">120 days ago</span>
                    </a>
                    <a href="#!" class="notification">
                        <div class="notification-icon">
                            <i class="fas fa-inbox"></i>
                        </div>
                        <div class="notification-text">53252</div>
                        <span class="notification-time">260 days ago</span>
                    </a>
                    <a href="#!" class="notification">
                        <div class="notification-icon">
                            <i class="fas fa-inbox"></i>
                        </div>
                        <div class="notification-text">53282</div>
                        <span class="notification-time">100 days ago</span>
                    </a>
                    <div class="notifications-show-all">
                        <a href="#!">Show all</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

</html>